<h2>Products</h2>
<div class="example-header-image"></div>
<div class="example-container">
  <div class="example-item"
       *ngFor=" let product of products;
  index as productId">
    <h4>
      <a [title]="product.name + ' details'"
         [routerLink]="['/products', productId]">
        {{ product.name }}
      </a>
    </h4>
    <p>
      Description: {{ product.description }}
    </p>
    <p>
      <mat-card-actions *ngIf="product.price > 700">
        <button type="button" mat-raised-button (click)="notify()">Notify Me</button>
      </mat-card-actions>
      <mat-card-actions>
        <button mat-raised-button (click)="share()">
          Share
        </button>
      </mat-card-actions>
    </p>
  </div>
</div>
<span class="manage-box">
    <button [routerLink]="['/login']">
      login
    </button>
      <button [routerLink]="['/register']">
      register
    </button>
    <button [routerLink]="['/list']">
      --- show user list ---
    </button>
</span>

